<template>
	<view class="">
		<u-navbar titleStyle="font-size:40rpx;color:#fff" :placeholder='true' title="COMMERCIAL INVOICE"
			titleWidth='600rpx' :autoBack="true" bgColor="#51A7FF" leftIconColor="#fff">
		</u-navbar>
		<view class="blueBox padding32">
			<view class="whiteBox">
				<view class="">
					TO:
				</view>
				<view class="flexJBC fontS24" style="margin-top:24rpx">
					<view class="co9">
						申请个人/公司名称：
					</view>
					<view class="elipes1" style="flex: 1;text-align: right;">
						{{info.order.bill_full_name}}
					</view>
				</view>
				<view class="flexJBC fontS24" style="margin-top:24rpx">
					<view class="co9">
						申请个人/公司地址：
					</view>
					<view class="elipes1" style="flex: 1;text-align: right;">
						{{info.order.bill_address}}
					</view>
				</view>
				<view class="flexJBC fontS24" style="margin-top:24rpx">
					<view class="co9">
						定单或合约号码（Invoice No）：
					</view>
					<view class="elipes1" style="flex: 1;text-align: right;">
						{{info.order.sn}}
					</view>
				</view>
				<view class="flexJBC fontS24" style="margin-top:24rpx">
					<view class="co9">
						日期（Date）：
					</view>
					<view class="elipes1" style="flex: 1;text-align: right;">
						{{info.order.pay_time}}
					</view>
				</view>
				<view class="flexJBC fontS24" style="margin-top:24rpx">
					<view class="co9">
						付款方式（Term of Payment）：
					</view>
					<view class="elipes1" style="flex: 1;text-align: right;">
						{{info.order.pay_type_text}}
					</view>
				</view>
			</view>
		</view>
		<view class="paddingLR32 flexJBC co9" style="margin-top:16rpx">
			<view class="" style="width: 35%;">
				<view class="">
					商品描述
				</view>
				<view class="fontS22">
					Descriptions
				</view>
			</view>
			<view class="center" style="width: 20%;" >
				<view class="">
					单价
				</view>
				<view class="fontS22">
					Unit Price
				</view>
			</view> 
			<view class="center" style="width: 20%;">
				<view class="">
					数量
				</view>
				<view class="fontS22">
					Quantity
				</view>
			</view>
			<view class="" style="width: 25%; text-align: right;">
				<view class="">
					总价
				</view>
				<view class="fontS22">
					Total Amount
				</view>
			</view>
		</view>
		<view class="paddingLR32 flexJBC co9" v-for="item in info.goods">
			<view class="" style="width: 35%;margin-top: 16rpx;" >
				{{item.product_name}}
			</view>
			<view class="center" style="width: 20%;" >
				{{item.product_price}}
			</view>
			<view class="center" style="width: 20%;">
					{{item.product_num}}
			</view>
			<view class="" style="width:25%; text-align: right;">
					{{item.total_price}}
			</view>
		</view>
		<view class="bottomBox flexJBC">
			<view class="">
				TOTAL
			</view>
			<view class="flex homeRed" style="align-items: flex-end;">
				<view class="fontS24">
					CNY
				</view>
				<view class="fontS32" style="margin-left: 8rpx;">
					{{info.order.real_price}}
				</view> 
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				info:{},
			}
		},
		onLoad(option) {
			this.$my.post('/index/user_order/get_bill_list',{sub_order_id:option.id}).then(res=>{
				if(res.code==200){
					this.info=res.data
				}
			})
		}
	}
</script>

<style lang="scss" scoped>
	.bottomBox{
		padding: 32rpx;
		box-sizing: border-box;
		background-color: #fff;
		margin-top: 40rpx;
		position: fixed;
		width: 100%;
		bottom: 0;
	}
	.blueBox {
		background-color: #51A7FF;
	}
</style>
